import React from 'react'
import { Modal, Form, Input, Radio } from 'antd'
import { UserType } from '../../api/user'

export interface UserCreateFormProps {
  visible: boolean
  title: string
  propFrom: any
  onCreate: (values: UserType) => void
  onCancel: () => void
}

const UserModel: React.FC<UserCreateFormProps> = ({
  propFrom,
  title,
  visible,
  onCreate,
  onCancel,
}) => {
  const [form] = Form.useForm()

  form.setFieldsValue(propFrom)

  return (
    <Modal
      visible={visible}
      title={title}
      destroyOnClose={true}
      okText="确认"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then(values => {
            form.resetFields()
            onCreate({...propFrom, ...values})
          })
          .catch(info => {
            console.log('Validate Failed:', info)
          });
      }}
    >
      <Form
        form={form}
        layout="horizontal"
        name="form_in_modal"
        labelCol={{ span: 4 }}
        initialValues={{ modifier: 'public' }}
      >
        <Form.Item
          name="nickName"
          label="用户名"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="name"
          label="姓名"
          rules={[{ required: true, message: '请输入姓名' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="deptName"
          label="所属机构"
          rules={[{ required: true, message: '请输入所属机构' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="email"
          label="邮箱"
          rules={[{ type: 'email', required: true, message: '请输入邮箱' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="phone"
          label="手机号"
          rules={[{ required: true, message: '请输入手机号' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item name="isMale" label="状态" rules={[{ required: true, message: '请选择用户状态' }]}>
          <Radio.Group>
            <Radio value={true}>正常</Radio>
            <Radio value={false}>异常</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default UserModel